<template>
	<div class="contentPlot" v-loading="contentPlotLoading">
		<el-tabs v-model="tabsActiveName" type="card" stretch class="plotTabs">
      <el-tab-pane label="例行巡检" name="inspection" class="tabsBox">
        <div class="title">检修内容</div>
        <el-form ref="inspectionForm" :model="inspectionForm" class="mindForm" label-width="100px" size="mini" :rules="formRules">
          <div class="formItem">
            <el-col :span="12">
              <el-form-item label="任务编号" label-width="" prop="taskId">
                <el-input v-model="inspectionForm.taskId"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem borderBtm">
            <el-col :span="8">
              <el-form-item label="站点名称" prop="station">
                <el-select v-model="inspectionForm.station" placeholder="请选择水站名称" :disabled="true">
                  <p v-for="(item, index) of stationList" :key="index">
                    <el-option :label="item" :value="item" se></el-option>
                  </p>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :pull="2">
              <el-form-item label="日期">
                <el-date-picker type="date" placeholder="选择日期" v-model="inspectionForm.time" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem shadow">
            <p class="formItemTit">站房环境检查(可多选)</p>
            <el-form-item label="" label-width="35px" style="margin-bottom: 5px;">
              <el-checkbox-group v-model="inspectionForm.content.stationAmbient" class="greenCheckBox">
                <el-checkbox label="仪器干净整洁" name="type"></el-checkbox>
                <el-checkbox label="门窗正常关闭" name="type"></el-checkbox>
                <el-checkbox label="分析仪器未阳光直射" name="type"></el-checkbox>
                <el-checkbox label="空调" name="type"></el-checkbox>
                <el-checkbox label="站房周围杂草、积水清除" name="type"></el-checkbox>
                <el-checkbox label="防雷设施正常" name="type"></el-checkbox>
                <el-checkbox label="漏雨检查" name="type"></el-checkbox>
                <el-checkbox label="外部设备检查" name="type"></el-checkbox>
                <el-checkbox label="其他" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-col :span="8">
              <el-form-item label="巡检内容及结果" label-width="145px"  class="noBold">
                <el-input v-model="inspectionForm.content.stationAmbientRes"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="操作内容"  class="noBold">
                <el-input v-model="inspectionForm.content.stationAmbientCnt"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem shadow">
            <p class="formItemTit">仪器与系统检查(可多选)</p>
            <el-form-item label="" label-width="35px" style="margin-bottom: 5px;">
              <el-checkbox-group v-model="inspectionForm.content.appSystem" class="greenCheckBox">
                <el-checkbox label="多参数在线分析仪" name="type"></el-checkbox>
                <el-checkbox label="采样系统" name="type"></el-checkbox>
                <el-checkbox label="预处理系统" name="type"></el-checkbox>
                <el-checkbox label="质控系统" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <p class="formItemSubtit">巡检内容及结果:</p>
            <el-row style="padding-left: 15px;padding-right: 15px;">
              <el-col :span="6">
                <el-form-item label="运行状态：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemRunState">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供电：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemPower">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="温度：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemTemper">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传感器：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemTemperSensor">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="搅拌电机：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemStirMotor">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="空压机：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemAirPump">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采水系统：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemWaterExtraction">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工控机：" label-width="100px"  style="margin-bottom:5px;">
                  <el-radio-group v-model="inspectionForm.content.appSystemIPC">
                    <el-radio label="正常"></el-radio>
                    <el-radio label="异常"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="10">
              <el-form-item label="操作内容">
                <el-input v-model="inspectionForm.content.appSystemCnt"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem shadow">
            <p class="formItemTit">易损件更换
              <span class="formAddBtn">
                <el-button class="greenBtn" size="mini" @click="addInput('vulnerableParts', ['vulnerablePartsName', 'vulnerablePartsNum', 'vulnerablePartsModel', 'vulnerablePartsBrand'])">新增一项</el-button>
                <el-button size="mini" @click="delInput('vulnerableParts')">删除</el-button>
              </span>
            </p>
            
            <el-row v-for="(item, index) of inspectionForm.content.vulnerableParts" :key="index">
              <el-col :span="4">
                <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-select v-model="item.vulnerablePartsName" @change="selectChange(item.vulnerablePartsName, item, 'vulnerablePartsModel', 'vulnerablePartsBrand')">
                    <el-option
                      v-for="vulnerable in stationConsumable.filter(v => v.type === '其他')"
                      :key="vulnerable.id"
                      :label="vulnerable.name"
                      :value="vulnerable.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-input-number v-model="item.vulnerablePartsNum" :min="0"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-input v-model="item.vulnerablePartsModel" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                  <el-input v-model="item.vulnerablePartsBrand" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            
          </div>
          <div class="mindHr"></div>
          <div class="formItem shadow">
            <div class="formItem">
              <p class="formItemTit">耗材更换
                <span class="formAddBtn">
                  <el-button class="greenBtn" size="mini" @click="addInput('consumablesGroup', ['consumablesName', 'consumablesNum', 'consumablesModel', 'consumablesBrand'])">新增一项</el-button>
                  <el-button size="mini" @click="delInput('consumablesGroup')">删除</el-button>
                </span>
              </p>
              <el-row v-for="(item, index) of inspectionForm.content.consumablesGroup" :key="index">
                <el-col :span="4">
                  <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-select v-model="item.consumablesName" @change="selectChange(item.consumablesName, item, 'consumablesModel', 'consumablesBrand')">
                      <el-option
                        v-for="vulnerable in stationConsumable.filter(v => v.type === '其他')"
                        :key="vulnerable.id"
                        :label="vulnerable.name"
                        :value="vulnerable.name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input-number v-model="item.consumablesNum" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.consumablesModel" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.consumablesBrand" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              
              
            </div>
            <div class="formItem">
              <p class="formItemTit">试剂更换
                <span class="formAddBtn">
                  <el-button class="greenBtn" size="mini" @click="addInput('reagentGroup', ['reagentName', 'reagentNum', 'reagentModel', 'reagentBrand'])">新增一项</el-button>
                  <el-button size="mini" @click="delInput('reagentGroup')">删除</el-button>
                </span>
              </p>
              <el-row v-for="(item, index) of inspectionForm.content.reagentGroup" :key="index">
                <el-col :span="4">
                  <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-select v-model="item.reagentName" @change="selectChange(item.reagentName, item, 'reagentModel', 'reagentBrand')">
                      <el-option
                        v-for="vulnerable in stationConsumable.filter(v => v.type === '试剂')"
                        :key="vulnerable.id"
                        :label="vulnerable.name"
                        :value="vulnerable.name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input-number v-model="item.reagentNum" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.reagentModel" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.reagentBrand" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              
            </div>
            <div class="formItem">
              <p class="formItemTit">管路清洗
                <span class="formAddBtn">
                  <el-button class="greenBtn" size="mini" @click="addInput('pipingGroup', ['pipingName', 'pipingNum', 'pipingModel', 'pipingBrand'])">新增一项</el-button>
                  <el-button size="mini" @click="delInput('pipingGroup')">删除</el-button>
                </span>
              </p>
              <el-row v-for="(item, index) of inspectionForm.content.pipingGroup" :key="index">
                <el-col :span="4">
                  <el-form-item :label="'名称' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-select v-model="item.pipingName" @change="selectChange(item.pipingName, item, 'pipingModel', 'pipingBrand')">
                      <el-option
                        v-for="vulnerable in stationConsumable.filter(v => v.type === '其他')"
                        :key="vulnerable.id"
                        :label="vulnerable.name"
                        :value="vulnerable.name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input-number v-model="item.pipingNum" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'规格' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.pipingModel" disabled></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'品牌' + (index > 0 ? index : '')" label-width="70px" class="noBold">
                    <el-input v-model="item.pipingBrand" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              
            </div>
            <div class="formItem">
              <p class="formItemTit">废液外运
                <span class="formAddBtn">
                  <el-button class="greenBtn" size="mini" @click="addInput('wasteShippingGroup', ['wasteName', 'wasteNumber', 'wasteUnit', 'wasteVolume'])">新增一项</el-button>
                  <el-button size="mini" @click="delInput('wasteShippingGroup')">删除</el-button>
                </span>
              </p>
              <el-row v-for="(item, index) of inspectionForm.content.wasteShippingGroup" :key="index">
                <el-col :span="6">
                  <el-form-item :label="'废液名称' + (index > 0 ? index : '')" label-width="100px"  class="noBold">
                    <el-input v-model="item.wasteName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item :label="'数量' + (index > 0 ? index : '')" label-width="70px"  class="noBold">
                    <!-- <el-input v-model="item.wasteNumber"></el-input> -->
                    <el-input-number v-model="item.wasteNumber" :min="0"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'单位' + (index > 0 ? index : '')" label-width="70px"  class="noBold">
                    <el-input v-model="item.wasteUnit"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item :label="'体积' + (index > 0 ? index : '')" label-width="70px"  class="noBold">
                    <el-input v-model="item.wasteVolume"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="formItem">
              <el-col :span="8">
                <el-form-item label="备注" label-width="70px" style="margin-bottom: 5px;" prop="remark">
                  <el-input type="textarea" :rows="4" v-model="inspectionForm.remark"></el-input>
                </el-form-item>
              </el-col>
            </div>
          </div>
          <br>
          <div class="formItem">
            <el-row>
              <el-col :span="9">
                <el-form-item label="巡检人员"  class="noBold" prop="person">
                  <el-input v-model="inspectionForm.person" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="padding-left: 32px;">
              <el-col :span="4">
                <el-button class="greenBtn" size="small" @click="formSubmit('inspectionForm', 'inspect')">确认</el-button>  
              </el-col>
            </el-row>            
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="保养检修" name="maintenance" class="tabsBox">
        
        <div class="title">检修内容</div>
        <el-form ref="maintenanceForm" :model="maintenanceForm" class="mindForm" label-width="100px" size="mini"
          :rules="formRules" style="max-width: 650px;"
        >
          <div class="formItem">
            <el-col :span="24">
              <el-form-item label="任务编号" prop="taskId">
                <el-input v-model="maintenanceForm.taskId"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem">
            <el-col :span="12">
              <el-form-item label="站点名称" prop="station">
                <el-select v-model="maintenanceForm.station" placeholder="请选择水站名称">
                  <p v-for="(item, index) of stationList" :key="index">
                    <el-option :label="item" :value="item" se></el-option>
                  </p>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期">
                <el-date-picker type="date" placeholder="选择日期" v-model="maintenanceForm.time" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem">
            <el-col :span="12">
              <el-form-item label="检修仪器名称">
                <el-input v-model="maintenanceForm.content.deviceName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格型号">
                <el-input v-model="maintenanceForm.content.modelType"></el-input>
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="检修类型">
            <el-radio-group v-model="maintenanceForm.content.maintenType">
              <el-radio label="实验室检修"></el-radio>
              <el-radio label="现场检修"></el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="formItem">
            <el-form-item label="检修结果">
              <el-input v-model="maintenanceForm.content.OverhaulRes"></el-input>
            </el-form-item>
          </div>
          <div class="formItem">
            <el-col :span="11">
              <el-form-item label="本次检修时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="maintenanceForm.content.thisTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="上次检修时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="maintenanceForm.content.LastTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </div>
          <div class="formItem">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="4" v-model="maintenanceForm.remark"></el-input>
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item label="检修人员" prop="person">
              <el-input v-model="maintenanceForm.person" disabled></el-input>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button class="greenBtn" size="medium" @click="formSubmit('maintenanceForm', 'maintenance')">确认</el-button> 
          </el-form-item>

        </el-form>
      </el-tab-pane>
      <el-tab-pane label="故障维修" name="repair" class="tabsBox">
      
        <div class="title">故障内容</div>
        <el-form ref="repairForm" :model="repairForm" class="mindForm" label-width="100px" 
          :rules="formRules" style="max-width: 650px;" size="mini"
        >
          <div class="formItem">
            <el-col :span="12">
              <el-form-item label="站点名称" prop="station">
                <el-select v-model="repairForm.station" placeholder="请选择水站名称">
                  <p v-for="(item, index) of stationList" :key="index">
                    <el-option :label="item" :value="item" se></el-option>
                  </p>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期">
                <el-date-picker type="date" placeholder="选择日期" v-model="repairForm.time" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="检修仪器名称">
            <el-input v-model="repairForm.content.deviceName"></el-input>
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input v-model="repairForm.content.modelType"></el-input>
          </el-form-item>
          <el-form-item label="故障原因">
            <el-input type="textarea" :rows="4" v-model="repairForm.content.failureReason" placeholder="输入故障原因"></el-input>
          </el-form-item>
          <el-form-item label="解决措施">
            <el-input type="textarea" :rows="4" v-model="repairForm.content.solutions" placeholder="输入解决措施"></el-input>
          </el-form-item>
          
          <!-- 更换内容 -->
          <el-form-item>
            <span class="formAddBtn">
              <el-button class="greenBtn" size="mini" @click="repairFormAddInput('replaceGroup', ['replaceCnt', 'replaceNum'])">新增一项</el-button>
              <el-button size="mini" @click="repairFormDelInput('replaceGroup')">删除</el-button>
            </span>
          </el-form-item>
          <el-row v-for="(item, index) of repairForm.content.replaceGroup" :key="index">
            <el-col :span="24">
              <el-form-item :label="'更换内容' + (index > 0 ? index : '')" label-width="100px">
                <el-input v-model="item.replaceCnt"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="'更换数量' + (index > 0 ? index : '')" label-width="100px">
                <el-input v-model="item.replaceNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="仪器校准">
            <el-checkbox-group v-model="repairForm.content.calibration" class="greenCheckBox">
              <el-checkbox label="标液校准" name="type"></el-checkbox>
              <el-checkbox label="标准曲线" name="type"></el-checkbox>
              <el-checkbox label="精密度检查" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" :rows="4" v-model="repairForm.remark"></el-input>
          </el-form-item>

          <el-form-item label="检修人员" prop="person">
            <el-input v-model="repairForm.person" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="greenBtn" size="medium" @click="formSubmit('repairForm', 'repair')">确认</el-button> 
          </el-form-item>

        </el-form>

      </el-tab-pane>
    </el-tabs>
	</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import posts from '@/plugins/request'
export default {
  name: 'contentPlot', 
  data () {
    return {
      msg: 'hello contentPlot!',
      contentPlotLoading: false,
      tabsActiveName: 'inspection',
      repairForm: {
        station: '',
        time: '',
        remark: '',
        person: '',
        content: {
          failureReason: '',
          solutions: '',
          deviceName: '',
          modelType: '',
          replaceGroup: [
            {
              replaceCnt: '',
              replaceNum: '',
            },
          ],
          calibration: [],
        }
      },
      maintenanceForm: {
        station: '',
        time: '',
        remark: '',
        person: '',
        taskId: '',
        content: {
          deviceName: '',
          modelType: '',
          maintenType: [],
          OverhaulRes: '',
          thisTime: '',
          LastTime: '',
        }
      },
      inspectionForm: {
        station: '',
        time: '',
        remark: '',
        person: '',
        taskId: '',
        content: {
          stationAmbient: [],
          stationAmbientRes: '',
          stationAmbientCnt: '',
          appSystem: [],
          appSystemRunState: '',
          appSystemPower: '',
          appSystemTemper: '',
          appSystemTemperSensor: '',
          appSystemStirMotor: '',
          appSystemAirPump: '',
          appSystemWaterExtraction: '',
          appSystemIPC: '',
          appSystemCnt: '',
          vulnerableParts: [ //易损件更换
            {
              vulnerablePartsName: '',
              vulnerablePartsNum: '',
              vulnerablePartsModel: '',
              vulnerablePartsBrand: '',
            },
          ],
          consumables: [],
          consumablesRes: '',
          consumablesGroup: [ //耗材更换
            {
              consumablesName: '',
              consumablesNum: '',
              consumablesModel: '',
              consumablesBrand: '',
            },
          ],
          reagent: [],
          reagentGroup: [ //试剂更换
            {
              reagentName: '',
              reagentNum: '',
              reagentModel: '',
              reagentBrand: '',
            }
          ],

          pipingGroup: [ //管路清洗
            {
              pipingName: '',
              pipingNum: '',
              pipingModel: '',
              pipingBrand: '',
            },
          ],
          wasteShippingGroup: [ //废液外运
            {
              wasteName: "",
              wasteNumber: 0,
              wasteUnit: "",
              wasteVolume: "",
            }
          ]
        },
      },
      stationConsumable: [],
      formRules: {
        station: [
          { required: true, message: '请选择站点', trigger: 'change' }
        ],
        person: [
          { required: true, message: '请输入巡检人员', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ],
        // taskId: [
        //   { required: true, message: '请输入任务编号', trigger: 'blur' }
        // ],
      }
		}
  },
	methods: {
    ...mapActions([
      'submitForm',
      'fetchStationConsumable'
    ]),
    async formSubmit(formName, type) {
      this.$refs[formName].validate(async (valid) => {
        if(valid) {
          this.contentPlotLoading = true
          let flag = confirm("你确定要提交吗?")
          if(flag) {
            let formData = this[formName]
            formData.type = type
            let checkRes = await posts.checkContentPlotForm(formData)
            if(this.showResult(checkRes)) {
              let result = await this.submitForm(formData)
              if(this.showResult(result)) {
                this.$notify({
                  title: '成功',
                  message: '提交成功!',
                  type: 'success'
                })
                this.$router.push('/historyList')
              }
            }
          }
        }else {
          return false
        }
      })
      this.contentPlotLoading = false
    },
    showResult(result) {
      if(result.message !== "success") {
        this.$notify({
          title: '提示',
          message: result.info,
          type: 'warning'
        })
        return false
      }
      return true
    },
    addInput(key, newInput) {
      let group = this.inspectionForm.content[key]
      let newitem = {}
      newInput.map((item) => {
        newitem[item] = ''
      })
      group.push(newitem)
    },
    delInput(key) {
      let group = this.inspectionForm.content[key]
      if(group.length > 1) {
        group.splice(-1)
      }
    },
    repairFormAddInput(key, newInput) {
      let group = this.repairForm.content[key]
      let newitem = {}
      newInput.map((item) => {
        newitem[item] = ''
      })
      group.push(newitem)
    },
    repairFormDelInput(key) {
      let group = this.repairForm.content[key]
      if(group.length > 1) {
        group.splice(-1)
      }
    },
    reagentChange(isSelect) {
      let reagentGroup = this.inspectionForm.content.reagentGroup
      for(let i = 0; i < reagentGroup.length; i++) {
        reagentGroup[i].select = isSelect.includes(reagentGroup[i].name)
      }
    },
    selectChange(curVal, group, model, brand) {
      let selectInfo = this.stationConsumable.find(v => v.name === curVal)
      group[model] = selectInfo.model
      group[brand] = selectInfo.brand
    }
  },
  async created() {
    // this.stationConsumable = await this.fetchStationConsumable("固戍水质净化厂")

    let type = this.$route.query.type
    let taskId = this.$route.query.taskId
    if(taskId) {
      if(type === 'inspect'){
        this.tabsActiveName = 'inspection'
        this.inspectionForm.taskId = taskId
        this.inspectionForm.station = this.$route.query.station
        this.stationConsumable = await this.fetchStationConsumable(this.inspectionForm.station)
      }else if(type === 'maintenance') {
        this.tabsActiveName = 'maintenance'
        this.maintenanceForm.taskId = taskId
      }
    }
    this.repairForm.person = this.maintenanceForm.person = this.inspectionForm.person = this.userInfo.user.username
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      userInfo: "getUserInfo"
    })
  }
}
</script>
<style scoped>
.contentPlot {
  background-color: #fff;
  min-height: 100%;
}
.plotTabs {}
.plotTabs .title {
  position: relative;
  color: #666;
  line-height: 70px;
  font-size: 16px;
  margin-left: 15px;
}
.plotTabs .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.tabsBox {
  padding: 0 20px 20px 20px;
}

.mindForm {
  font-weight: bold;
}
.mindForm .noBold {
  font-weight: 500;
}
.mindForm .formItem {
  overflow: hidden;
  padding-right: 15px;
  padding-bottom: 15px;
}
.mindForm .formItem.shadow {
  box-shadow: 1px 1px 15px #dcdcdc;
  margin-bottom: 15px;
}

.mindForm .formItem .formItemTit {
  padding-left: 30px;
  margin-bottom: 15px;
  margin-top: 15px;
} 
.mindForm .formItem .formItemSubtit {
  padding-left: 33px;
  margin-bottom: 6px;
} 
.mindForm .formItem .formAddBtn {
  margin-left: 15px;
}
.mindForm .borderBtm {
  border-bottom: 1px solid #dcdcdc;
  margin-bottom: 15px;
}

.mindForm .mindHr {
  width: 100%;
  height: 1px;
  background: #dcdcdc;
  margin-bottom: 15px;
}



</style>

<style>
/*标签样式魔改*/
.plotTabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  background: #76bfff;
  color: #fff;
}

.plotTabs.el-tabs--card>.el-tabs__header,
.plotTabs.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}
.plotTabs .el-tabs__item {
  color: #6a6a6a;
  background: #e6e6e6;
  margin-right: 5px;
  transition: background .3s ease;
}
.plotTabs .el-tabs__item:hover {
  color: #76bfff;
}
.plotTabs .el-tabs__item:last-child{
  margin-right: 0px;
}
</style>
